<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="root">
    <button>正在热映</button>
    <button>即将上映</button>
    <div id="filmList"></div>
</div>
</body>
<script>
    const btns = document.querySelectorAll("button");
    const filmList = document.querySelector("#filmList");
    searchFilms();
    btns[0].style.background = "red";
    function searchFilms(type=1){
        filmList.innerHTML = "<h3>正在加载中……</h3>";
        // 发送ajax请求
        // 1- 创建xhr实例
        const xhr = new XMLHttpRequest();
        xhr.responseType = "json";// 设置响应体的格式为JSON对象
        // 2- 指定open
        xhr.open("get",`https://m.maizuo.com/gateway?cityId=210300&pageNum=1&pageSize=2&type=${type}&k=4857265`);
        xhr.setRequestHeader("X-Client-Info",`{"a":"3000","ch":"1002","v":"5.2.1","e":"17186151345962393859391489"}`);
        xhr.setRequestHeader("X-Host",`mall.film-ticket.film.list`);
        xhr.send();
        xhr.onload = function(){
            console.log(xhr.response.data.films)
            filmList.innerHTML = xhr.response.data.films.map(item=>(`
                <div>
                    <img height="200" src="${item.poster}" alt="">
                    <h3>${item.name}</h3>
                </div>
            `)).join("")

        }
    }
    btns[0].onclick = function(){
        btns[1].style.background = null;
        // DOM元素下有一个style对象，可以设置样式
        this.style.background = "red";
        searchFilms();
    }
    btns[1].onclick = function(){
        btns[0].style.background = null;
        this.style.background = "red";
        searchFilms(2);
    }
</script>
</html>